<script setup lang='ts'>
import { ref, reactive } from "vue";
import { jumpPage, Toast } from "@/utils";
import NavBar from "../components/NavBar.vue";
import useAuth from "../../hooks/useAuth";
import { useUserStore } from "../../store/user";

// 修改密码弹窗
let updatePasswordPopup = ref(false);
// 退出登录弹窗
const logoutPopup = ref(false);
const state = reactive({
	navHeight: 0,
})
const action = ref([
	{
		path: "/pages/user/ApplyWithdraw/index",
		name: "申请提现",
		icon: "/static/image/user/apply.png"
	},
	{
		path: "/pages/user/SettleRecord/index",
		name: "结算查询",
		icon: "/static/image/user/settle.png"
	},
	{
		path: "/pages/user/AutoAccounting/index",
		name: "自动分账",
		icon: "/static/image/user/split.png"
	},
	{
		path: "/pages/user/WithdrawRecord/index",
		name: "提现记录",
		icon: "/static/image/user/withdraw.png"
	}
])
const settings = ref([
	{
		path: "/pages/user/AutoAccounting/Agent",
		name: "商户进件",
		icon: "/static/image/user/agent.png"
	},
	{
		path: "/pages/user/Renew/index",
		name: "续费设备",
		icon: "/static/image/user/renew.png"
	},
	{
		path: "/pages/user/Notification/index",
		name: "通知设置",
		icon: "/static/image/user/notify.png"
	},
	{
		path: "/pages/user/SubAccount/index",
		name: "子账号管理",
		icon: "/static/image/user/subaccount.png"
	},
])

const { logout } = useAuth()

const store = useUserStore()

// 修改密码按钮点击事件
const handleUpdatePassword = () => {
	updatePasswordPopup.value = true;
}
// 修改密码弹窗取消按钮点击事件
const handleCloseUpdatePassword = () => {
	updatePasswordPopup.value = false;
}
// 修改密码弹窗确认按钮点击事件
const handleConfirmUpdatePassword = () => {
	
}

// 退出登录按钮点击事件
const handleLogout = () => {
	logoutPopup.value = true;
}

// 退出登录弹窗取消按钮点击事件
const handleCloseLogout = () => {
	logoutPopup.value = false;
}

// 退出登录弹窗确认按钮点击事件
const handleConfirmLogout = () => {
	logout();
}
</script>

<template>
	<view class="user_wrap">
		<NavBar title="我的" v-model:navHeight="state.navHeight" bg="transparent" color="#ffffff" :hideBack="true"></NavBar>
		<image class="bg" mode="aspectFill" src="/static/image/user/bg.png"/>
		<view class="user_content">
			<view class="card user">
				<image class="avatar" mode="aspectFill" src="/static/image/user/bg.png"/>
				<view class="info">
					<view class="title">系统管理员</view>
					<view class="username">{{ store.userInfo?.userName }}</view>
				</view>
				<view class="pwd" @click="handleUpdatePassword">
					修改密码
					<image class="arrow" mode="widthFix" src="/static/image/form/right_arrow.png" />
				</view>
			</view>
			<view class="card action">
				<view class="item" v-for="(item, index) in action" :key="index" @click="jumpPage(item.path)">
					<image class="icon" mode="widthFix" :src="item.icon"/>
					{{ item.name }}
				</view>
			</view>
			<view class="card settings">
				<view class="item" v-for="(item, index) in settings" :key="index" @click="jumpPage(item.path)">
					<image class="icon" mode="widthFix" :src="item.icon"/>
					<view class="right">
						{{ item.name }}
						<image class="arrow" mode="widthFix" src="/static/image/form/right_arrow.png" />
					</view>
				</view>
			</view>
			
			<view class="card settings">
				<view class="item" @click="handleLogout">
					<image class="icon" mode="widthFix" src="/static/image/user/logout.png"/>
					<view class="right">
						退出登录
						<image class="arrow" mode="widthFix" src="/static/image/form/right_arrow.png" />
					</view>
				</view>
			</view>
		</view>
		
		<!-- 退出登录弹窗 -->
		<u-popup :show="logoutPopup" mode="center" round="16rpx">
			<view class="popup logout_popup">
				<view class="popup_title">退出登录</view>
				<view class="popup_content">是否确认退出此账号？</view>
				<view class="popup_footer">
					<view class="btn_cancel" @click="handleCloseLogout">取消</view>
					<view class="btn_confirm" @click="handleConfirmLogout">确定</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 修改密码弹窗 -->
		<u-popup :show="updatePasswordPopup" mode="center" round="16rpx">
			<view class="popup update_password_popup">
				<view class="popup_title">修改密码</view>
				<view class="password_form">
					<view class="password_form_item">
						<text>原密码</text>
						<input type="password" placeholder-class="placeholder" placeholder="请输入原密码" />
					</view>
					<view class="password_form_item">
						<text>新密码</text>
						<input type="password" placeholder-class="placeholder" placeholder="请输入原密码" />
					</view>
					<view class="password_form_item">
						<text>确认新密码</text>
						<input type="password" placeholder-class="placeholder" placeholder="请输入原密码" />
					</view>
				</view>
				<view class="popup_footer">
					<view class="btn_cancel" @click="handleCloseUpdatePassword">取消</view>
					<view class="btn_confirm" @click="handleConfirmUpdatePassword">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<style lang='scss'>
.user_wrap {
	position: relative;
	padding-top: calc(v-bind('state.navHeight') * 1px);
	.bg {
		width: 750rpx;
		height: 290rpx;
		position: fixed;
		top: 0;
	}
	.user_content {
		width: 750rpx;
		position: absolute;
		top: calc(v-bind('state.navHeight') * 1px);
		.card {
		  margin: 28rpx 32rpx;
		  padding: 28rpx 24rpx;
		  box-sizing: border-box;
		  display: flex;
		  align-items: center;
		  background: #ffffff;
		  border-radius: 24rpx;
			&.settings {
				display: flex;
				flex-direction: column;
				padding: 0 32rpx;
				.item {
					display: flex;
					align-items: center;
					width: 100%;
					font-size: 30rpx;
					color: #1A1A1A;
					&:not(:last-child) {
						.right {
							border-bottom: solid 2rpx #f2f2f2;
						}
					}
					.icon {
						width: 46rpx;
						margin-right: 22rpx;
					}
					.right {
						padding: 34rpx 0;
						flex: 1;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}

			}
		}
	}
	.arrow {
	  width: 30rpx;
	  margin-left: 5rpx;
	  margin-top: 3rpx;
	}
	.user {
	  .avatar {
			width: 96rpx;
			height: 96rpx;
			border-radius: 100%;
	  }
	  .info {
	    flex: 1;
	    margin: 0 16rpx;
	    .title {
	      font-size: 32rpx;
	      color: #1A1A1A;
	      margin-bottom: 10rpx;
	    }
	    .username {
	      font-size: 24rpx;
	      color: #999999;
	    }
	  }
	  .pwd {
	    font-size: 24rpx;
	    color: #FF9832;
	    display: flex;
	    align-items: center;
	  }
	}
	.action {
	  display: flex;
	  justify-content: space-between;
	  padding: 32rpx 38rpx;
	  .item {
	    font-size: 24rpx;
	    color: #1A1A1A;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	  }
	  .icon {
	    width: 54rpx;
	    margin-bottom: 12rpx;
	  }
	}
	.logout_popup {
		.popup_content {
			font-size: 24rpx;
			color: #353535;
			text-align: center;
			line-height: 28rpx;
			margin-bottom: 52rpx;
		}
		
	}
	.update_password_popup {
		.password_form {
			width: 100%;
			padding: 0 54rpx 24rpx 20rpx;
			box-sizing: border-box;
			.password_form_item {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 28rpx;
				text {
					display: inline-flex;
					flex: 1;
					justify-content: flex-end;
					text-align: right;
					font-size: 24rpx;
					color: #353535;
					line-height: 28rpx;
					margin-right: 28rpx;
				}
				input {
					width: 304rpx;
					height: 56rpx;
					background: #F2F2F2;
					border-radius: 8rpx;
					box-sizing: border-box;
					padding: 0 24rpx;
					font-size: 24rpx;
					color: #303030;
				}
				.placeholder {
					color: #646466;
					font-size: 24rpx;
				}
			}
		}
	}
	.popup {
		width: 560rpx;
		background: #ffffff;
		border-radius: 16rpx;
		box-sizing: border-box;
		padding-top: 40rpx;
		.popup_title {
			font-weight: 500;
			font-size: 36rpx;
			color: #353535;
			letter-spacing: 1px;
			text-align: center;
			margin-bottom: 32rpx;
		}
		.popup_footer {
			width: 560rpx;
			height: 112rpx;
			background: #ffffff;
			border-radius: 0 0 16rpx 16rpx;
			box-sizing: border-box;
			border-top: 1px solid rgba(0, 0, 0, 0.1);
			display: flex;
			view {
				width: 50%;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				display: flex;
				align-items: center;
				justify-content: center;
				&.btn_confirm {
					color: #EC5644;
					border-left: 1px solid rgba(0, 0, 0, 0.1);
				}
			}
		}
	}
}
</style>